<template>
	<view class="content">
		<view class="user-info-box">
			<image style="width: 160rpx; height: 160rpx; background-color: #eeeeee; border-radius: 50%;"
				:src="userInfo? userInfo.headSrc : headSrc"></image>
			<block v-if="userInfo">
				<view class="right-info-box">
					<view class="name">{{ userInfo.userName }}</view>
					<view class="info">
						<text>关注：{{ userInfo.interest }}</text>
						<text>粉丝：{{ userInfo.fans }}</text>
						<text>获赞：{{ userInfo.receivedLikes }}</text>
					</view>
				</view>
				<u-icon style="position: absolute; top: 40rpx; right: 24rpx;" color="#ccc" name="edit-pen-fill"
					size="28" @click="goToEdit"></u-icon>
			</block>
			<block v-else>
				<view class="right-info-box login-text" @click="onLogin">登录</view>
			</block>
		</view>
	
		<view class="release-box">
			<view class="release-title">发布信息</view>
	
			<view class="treasure-container-box">
				<view class="treasure-item-box" @click="onFunCircle">
					趣事圈
				</view>
				<view class="treasure-item-box">
					短视频
				</view>
				<view class="treasure-item-box">
					新闻趣事
				</view>
				<view class="treasure-item-box">
					文旅推荐
				</view>
				<view class="treasure-item-box">
					搞笑
				</view>
				<view class="treasure-item-box">
					汽车榜
				</view>
			</view>
	
		</view>
	
		<view class="creativeCenter-box">
			<view class="creativeCenter-title">创作中心</view>
			<view class="creativeCenter-data-box">
				<view class="release-total">发布总数：1200</view>
				<view class="like-total">点赞总数：8645</view>
			</view>
		</view>
	
	</view>
</template>

<script lang="ts">
	import { getOpenIdApi } from '@/api/my.js';
	import { jumpToFunCircle, jumpToEditUserInfo } from '@/utils/jump.js';
	export default {
		data() {
			return {
				headSrc: "https://stopp.cn:8100/positive/headImg/a4c6683c-788f-4737-9a2f-1ba0817c9ddf.jpg",
				userInfo: null
			}
		},
		
		onShow() {
			console.log('')
			this.userInfo = uni.getStorageSync('userInfo') == '' ? null : uni.getStorageSync('userInfo')
		},
		
		methods: {
			// 登录
			async onLogin() {
				const loginRes = await uni.login({
					provider: 'weixin',
				});
				if (loginRes && loginRes.code) {
					let { code, errorMsg, results } = await getOpenIdApi({
						code: loginRes.code
					})
					if (code == 200) {
						this.successTips()
						this.userInfo = results
						uni.setStorageSync('userInfo', results)
					} else {
						this.errTips(errorMsg)
					}
				}
			
			},
			
			// 点击趣事圈
			onFunCircle() {
				jumpToFunCircle()
			},
			
			// 点击编辑
			goToEdit() {
				jumpToEditUserInfo()
			},
			
			// 成功提示
			successTips() {
				uni.showToast({ title: '登录成功', icon: 'success' });
			},
			
			// 异常提示
			errTips(errorMsg) {
				uni.showToast({ title: '登录异常', icon: 'error' });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.user-info-box {
			padding: 24rpx;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 4rpx 4rpx 4rpx 4rpx rgb(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;
			position: relative;

			.right-info-box {
				width: calc(100% - 160rpx - 24rpx);
				padding: 18rpx 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					font-weight: 700;
				}

				.info {
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.login-text {
				justify-content: center;
				font-weight: 700;
			}
		}

		.release-box {
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 4rpx 4rpx 4rpx 4rpx rgb(0, 0, 0, 0.1);
			margin-top: 40rpx;

			.release-title {
				font-size: 32rpx;
				font-weight: 700;
			}

			.treasure-container-box {
				margin-top: 40rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.treasure-item-box {
					flex: 0 0 calc((100% - 160rpx)/3);
					height: 160rpx;
					margin: 0 0rpx 50rpx 0;
					background-color: #ccc;
					border-radius: 10rpx;
					// box-shadow: 4rpx 4rpx 4rpx 4rpx rgb(0, 0, 0, 0.1);
					text-align: center;
					line-height: 160rpx;
				}

				.treasure-item-box:nth-child(4),
				.treasure-item-box:nth-child(5) {
					margin: 0 !important;
				}
			}
		}

		.creativeCenter-box {
			width: 100%;
			margin-top: 48rpx;

			.creativeCenter-title {
				font-size: 32rpx;
				font-weight: 700;
			}

			.creativeCenter-data-box {
				display: flex;
				justify-content: space-between;
				padding: 40rpx;
				box-sizing: border-box;

				.release-total,
				.like-total {
					width: 50%;
					font-size: 28rpx;
					font-weight: 700;
				}

				.like-total {
					text-align: right;
				}

				.release-total {
					border-right: 4rpx solid #ccc;
				}
			}
		}
	}
</style>